﻿<template>
    <div style="height:100%;">
        <Row>
    
            <!--根据需求删除不不要查询条件-->
            <Col span="24" class="col-margin">
            <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange' style="width: 350px;float: left;margin-right: 5px;"></Cascader>
            账号：
            <Input v-model="searchModel.Account" placeholder="请输入查询的账号值..." style="width: 100px"></Input>
            姓名：
            <Input v-model="searchModel.UserName" placeholder="请输入查询的姓名值..." style="width: 100px"></Input>
            用户类型：
            <Select v-model="searchModel.UserType" placeholder="全部" style="width: 100px" @on-change="getPageData">
                <Option value="">全部</Option>
                <Option :value="item.DictValue" v-for="item in userTypeList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
            状态：
            <Select v-model="searchModel.Status" placeholder="全部" style="width: 100px" @on-change="getPageData">
                <Option value="">全部</Option>
                <Option value="1">启用</Option>
                <Option value="0">停用</Option>
            </Select>
            <Button icon="ios-search" type="ghost" @click="getPageData()">查询</Button>
            </Col>
        </Row>
        <Row>
            <Col span="24" class="col-margin">
            <Button icon="plus" type="primary" @click="modalShow()">新增</Button>
            <!--<Button icon="android-done-all" type="primary" @click="multiSelect">批量删除</Button>-->
            </Col>
        </Row>
        <Row>
            <Col span="24" class="col-margin">
            <Table size="small" @on-select="selectSingel" @on-select-all="selectAll" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
            </Col>
        </Row>
        <Row>
            <Col span="24">
            <Page class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
            </Col>
        </Row>
        <Modal v-model="showType" :mask-closable="false">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">信息编辑</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <div slot="footer">
                <Button type="primary" @click="save('dataModel')">提交</Button>
                <Button type="ghost" @click="cancel('dataModel')" style="margin-left: 8px">取消</Button>
            </div>
            <Form ref="dataModel" :model="dataModel" :rules="ruleValidate" :label-width="100">
                <Form-item style="display:none;" prop="Id">
                    <Input v-model="dataModel.Id"></Input>
                </Form-item>
                <Form-item label="账号" prop="Account">
                    <Input v-model="dataModel.Account" placeholder="请输入账号"></Input>
                </Form-item>
                <Form-item label="所属行政区划" prop="AreaCode">
                    <Cascader :data="AreaList" v-model="dataModel.AreaCodeList" change-on-select @on-change='cascaderChange'></Cascader>
                    <Input style="display:none;" v-model="dataModel.AreaCode"></Input>
                </Form-item>
                <Form-item label="姓名" prop="UserName">
                    <Input v-model="dataModel.UserName" placeholder="请输入姓名"></Input>
                </Form-item>
                <Form-item label="用户类型" prop="UserType">
                    <Select v-model="dataModel.UserType" placeholder="请选择用户类型">
                        <Option :value="item.DictValue" v-for="item in userTypeList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                </Form-item>
                <Form-item label="状态" prop="Status">
                    <Select v-model="dataModel.Status" placeholder="请选择状态">
                        <Option value="1">启用</Option>
                        <Option value="0">停用</Option>
                    </Select>
                </Form-item>
                <Form-item label="工作单位" prop="UninName">
                    <Input v-model="dataModel.UninName" placeholder="请输入工作单位"></Input>
                </Form-item>
                <Form-item label="单位地址" prop="UnitAddress">
                    <Input v-model="dataModel.UnitAddress" placeholder="请输入单位地址"></Input>
                </Form-item>
                <Form-item label="职务" prop="PostName">
                    <Input v-model="dataModel.PostName" placeholder="请输入职务"></Input>
                </Form-item>
                <Form-item label="办公电话" prop="TelPhone">
                    <Input v-model="dataModel.TelPhone" placeholder="请输入办公电话"></Input>
                </Form-item>
                <Form-item label="电话" prop="Phone">
                    <Input v-model="dataModel.Phone" placeholder="请输入电话"></Input>
                </Form-item>
                <Form-item label="邮件" prop="Email">
                    <Input v-model="dataModel.Email" placeholder="请输入邮件"></Input>
                </Form-item>
                <Form-item label="排序" prop="Sort">
                    <Input v-model="dataModel.Sort" placeholder="请输入排序"></Input>
                </Form-item>
                <Form-item label="备注" prop="Remark">
                    <Input v-model="dataModel.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="备注长度请小于150个字符..."></Input>
                </Form-item>
            </Form>
        </Modal>
        <Modal v-model="RoleModalType" :mask-closable="false">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">用户授权</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <div slot="footer">
                <Button type="primary" @click="roleSave()">确定</Button>
                <Button type="ghost" @click="roleCancel()" style="margin-left: 8px">取消</Button>
            </div>
            <Table size="small" @on-selection-change="selecChange" @on-select-all="selectAll" border :context="ctx" :columns="RoleColumnsList" :data="RoleList" no-data-text='暂无数据...'></Table>
        </Modal>
        <Modal v-model="infoshow" :mask-closable="false" width="800">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">详细信息</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <div slot="footer">
                <Button type="ghost" @click="infoshow=false" style="margin-left: 8px">取消</Button>
            </div>
            <table class="userinfo">
                <tr>
                    <th style="width:11%;">账号</th>
                    <td>{{dataModel.Account}}</td>
                    <th style="width:14%;">所属行政区划</th>
                    <td>{{dataModel.AreaCode|omgAreaName}}</td>
                </tr>
                <tr>
                    <th>姓名</th>
                    <td>{{dataModel.UserName}}</td>
                    <th>用户类型</th>
                    <td>{{dataModel.UserType|omgConvDict('UserType')}}</td>
                </tr>
                <tr>
                    <th>状态</th>
                    <td>{{dataModel.Status|omgConvDict('StatusList')}}</td>
                    <th>职务</th>
                    <td>{{dataModel.PostName}}</td>
                </tr>
                <tr>
                    <th>工作单位</th>
                    <td>{{dataModel.UninName}}</td>
                    <th>单位地址</th>
                    <td>{{dataModel.UnitAddress}}</td>
                </tr>
                <tr>
                    <th>办公电话</th>
                    <td>{{dataModel.TelPhone}}</td>
                    <th>电话</th>
                    <td>{{dataModel.Phone}}</td>
                </tr>
                <tr>
                    <th>邮件</th>
                    <td>{{dataModel.Email}}</td>
                    <th>最后登录时间</th>
                    <td>{{dataModel.LastLoginTime|moment}}</td>
                </tr>
                <tr>
                    <th>新增时间</th>
                    <td>{{dataModel.AddTime|moment}}</td>
                    <th>修改时间</th>
                    <td>{{dataModel.AddUser}}</td>
                </tr>
                <tr>
                    <th>修改时间</th>
                    <td>{{dataModel.UpdateTime|moment}}</td>
                    <th>修改人</th>
                    <td>{{dataModel.UpdateUser}}</td>
                </tr>
                <tr>
                    <th>备注</th>
                    <td colspan="3">{{dataModel.Remark}}</td>
                </tr>
            </table>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            UserId: '',//授权用户编号
            infoshow: false,
            RoleList: [],//角色列表
            RoleModalType: false,//授权角色modal框状态
            AreaList: this.GetlocaStorage("areatreelist"),//所属行政区划数组
            userTypeList: this.GetGroupDict("UserType"),//用户类型
            showType: false,//编辑框弹出状态
            ruleValidate: {//验证模型
                Account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
                UserName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
                AreaCode: [{ required: true, message: '请选择行政区划', trigger: 'blur' }],
                Remark: [
                    { required: false, message: '备注长度请小于100个字符', trigger: 'blur' },
                    { type: 'string', max: 100, message: '备注长度请小于150个字符', trigger: 'blur' }
                ]
            },
            dataModel: {//编辑模型
                Id: 0,
                Account: '',
                AreaCode: '',
                AreaCodeList: [],
                UserName: '',
                UserType: '1',
                Status: '1',
                UninName: '',
                UnitAddress: '',
                PostName: '',
                TelPhone: '',
                Email: '',
                Phone: '',
                Sort: '1',
                Remark: ''
            },
            clientHeight: window.innerHeight - 260,//表格默认高度
            //查询模型：根据需求删除不不要查询条件
            searchModel: {
                Account: '',
                AreaCode: '',
                UserName: '',
                UserType: '',
                UninName: '',
                UnitAddress: '',
                PostName: '',
                TelPhone: '',
                Status: '',
                PageNumber: 1, PageSize: 20
            },
            pageSizeOpts: [20, 40, 50],//默认分页最大设置
            datas: {},//table数据对象
            dataIds: [],
            ctx: this,//table数据上下文
            RoleColumnsList: [//表头对象
                { type: 'selection', width: 60, align: 'center' },//多选设置
                { title: "角色名称", key: "RoleName" },
                { title: "备注", key: "Remark" }
            ],
            columnsList: [//表头对象
                { title: "所属行政区划", key: "AreaCodeName", width: 220 },
                { title: "账号", key: "Account", width: 80 },
                { title: "姓名", key: "UserName", width: 100 },
                { title: "单位名称", key: "UninName", width: 100 },
                { title: "职务", key: "PostName", width: 100 },
                { title: "个人电话", key: "Phone", width: 115 },
                { title: "单位电话", key: "TelPhone", width: 115 },
                { title: "单位地址", key: "UnitAddress" },
                {
                    title: "操作", key: "Id", width: 400, align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                class:{
                                    ieditColor:true
                                },
                                props: {
                                    size: 'small',
                                    type:'ghost',
                                    icon: 'ios-paper-outline'
                                }, style: {
                                    marginRight: '5px'
                                }, on: {
                                    click: () => {
                                        this.showInfo(params.row.Id)
                                    }
                                }
                            }, '详细信息'),
                            h('Button', {
                                class:{
                                    ieditColor:true
                                },
                                props: {
                                    size: 'small',
                                    type:'ghost',
                                    icon: 'pull-request'
                                }, style: {
                                    marginRight: '5px'
                                }, on: {
                                    click: () => {
                                        this.showRoleModal(params.row.Id)
                                    }
                                }
                            }, '授权'),
                            h('Button', {
                                class:{
                                    irefreshColor:true
                                },
                                props: {
                                    size: 'small',
                                    type:'ghost',
                                    icon: 'refresh'
                                }, style: {
                                    marginRight: '5px'
                                }, on: {
                                    click: () => {
                                        this.refreshPwd(params.row.Id)
                                    }
                                }
                            }, '重置密码'),
                            h('Button', {
                                class:{
                                    ieditColor:true
                                },
                                props: {
                                    size: 'small',
                                    type:'ghost',
                                    icon: 'ios-compose'
                                }, style: {
                                    marginRight: '5px'
                                }, on: {
                                    click: () => {
                                        this.editInfo(params.row.Id)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                class:{
                                    ideleteColor:true
                                },
                                props: {
                                    size: 'small',
                                    type:'ghost',
                                    icon: 'ios-trash-outline'
                                }, style: {
                                    marginRight: '5px'
                                }, on: {
                                    click: () => {
                                        this.delInfo(params.row.Id)
                                    }
                                }
                            }, '删除'),
                        ]);
                    }
                }]
        }
    },
    mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 260;
            })()
        };
    },
    methods: {
        //重置密码
        refreshPwd(id) {
            var self = this;
            self.$http.get('User/GetRestPassword', { params: { id: id } }).then(function (res) {
                if (res.data.status === 1) {
                    self.$Notice.success({ title: '重置密码成功！', desc: false });
                }
                else {
                    self.$Modal.error({ title: '提示信息', content: res.data.message });
                }
            });
        },
        showInfo(id) {
            var self = this;
            this.$http.get("User", { params: { id: id } }).then(//获取数据编辑项的值
                function (res) {
                    if (res.data.status == 1) {
                        self.dataModel = res.data.model;
                        self.infoshow = true;//打开modal
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
                    }
                }
            );
        },
        //打开角色列表授权
        showRoleModal(id) {
            this.UserId = id;
            this.RoleModalType = true;
            var self = this;
            self.$http.get('UserRole', { params: { id: this.UserId } }).then(function (res) {
                if (res.data.status === 1) {
                    self.RoleList = res.data.model;
                }
                else {
                    self.$Modal.error({ title: '提示信息', content: res.data.message });
                }
            });
        },
        //授权保存
        roleSave() {
            var self = this;
            var URModel = new Object();
            URModel.UserId = this.UserId;
            URModel.RoleList = this.getDataIds(this.dataIds);
            console.log(URModel);
            self.$http.post('UserRole', URModel).then(function (res) {
                if (res.data.status === 1) {
                    self.$Notice.success({ title: '授权成功！', desc: false });
                    self.RoleModalType = false;
                }
                else {
                    self.$Modal.error({ title: '提示信息', content: res.data.message });
                }
            });
        },
        //获取用户选中角色
        getDataIds(idList) {
            var ids = [];
            if (idList.length !== 0) {
                for (var i = 0; i < idList.length; i++) {
                    ids.push({ 'UserId': this.UserId, 'RoleId': idList[i].Id });
                }
            }
            return ids;
        },
        //授权取消
        roleCancel() {
            this.UserId = "";
            this.RoleModalType = false;
        },
        //行政区划级联选择
        cascaderChange(value, selectedData) {
            const index = value.length - 1;
            this.dataModel.AreaCode = value[index];
        },
        //查询行政区划级联选择
        SearchCascaderChange(value, selectedData) {
            const index = value.length - 1;
            this.searchModel.AreaCode = value[index];
        },
        //获取当前页码
        getPageNumber(pageIndex) {
            this.searchModel.PageNumber = pageIndex;
            this.getPageData();
        },
        //获取当前分页大小
        getPageSize(pageSize) {
            this.searchModel.PageSize = pageSize;
            this.getPageData();
        },
        //获取this.datas: {},//table数据对象
        getPageData() {
            var self = this;
            self.$http.post('User/PostPageList', this.searchModel).then(function (res) {
                if (res.data.status === 1) {
                    self.datas = res.data;
                }
                else {
                    self.$Modal.error({ title: '提示信息', content: res.data.message });
                }
            });
        },
        //编辑获取对象传入id
        editInfo(id) {//编辑
            var self = this;
            this.$http.get("User", { params: { id: id } }).then(//获取数据编辑项的值
                function (res) {
                    if (res.data.status == 1) {
                        self.dataModel = res.data.model;
                        self.dataModel.AreaCodeList = self.dataModel.AreaCodes.split(",");
                        self.modalShow();//打开modal
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
                    }
                }
            );
        },
        //删除对象
        delInfo(id) {
            var self = this;
            self.$Modal.confirm({
                title: '提示信息',
                content: '<p>数据删除后不可恢复，确定要删除？</p>',
                onOk: () => {
                    this.$http.delete("User", { params: { id: id } }).then(
                        function (res) {
                            if (res.data.status == 1) {
                                self.$Notice.success({ title: '删除成功！', desc: false });
                                self.getPageData();
                            }
                            else {
                                self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                            }
                        }
                    );
                }
            });
        },
        //保存方法
        save(modelname) {
            var self = this;
            this.$refs[modelname].validate((valid) => {
                if (valid) {
                    if (this.dataModel.Id === 0) {
                        this.$http.post('User', this.dataModel).then(
                            function (res) {
                                switch (res.data.status) {
                                    case 0:
                                        self.$Modal.info({ title: "提示信息", content: res.data.message, desc: false });
                                        break;
                                    case 1:
                                        self.getPageData();//读取分页数据
                                        self.restModel(modelname);//重置model
                                        self.modalHide();//关闭modal
                                        self.$Notice.success({ title: '保存成功！', desc: false });
                                        break;
                                    case -1:
                                        self.$Modal.warning({ title: "提示信息", content: "修改失败,请与管理员联系!" });
                                        break;
                                }
                            });
                    } else {
                        this.$http.put('User', this.dataModel).then(
                            function (res) {
                                switch (res.data.status) {
                                    case 0:
                                        self.$Modal.info({ title: "提示信息", content: res.data.message, desc: false });
                                        break;
                                    case 1:
                                        self.getPageData();//读取分页数据
                                        self.restModel(modelname);//重置model
                                        self.modalHide();//关闭modal
                                        self.$Notice.success({ title: '保存成功！', desc: false });
                                        break;
                                    case -1:
                                        self.$Modal.warning({ title: "提示信息", content: "修改失败,请与管理员联系!" });
                                        break;
                                }
                            });
                    }
                }
            });
        },
        //编辑框打开
        modalShow() {
            this.showType = true;
        },
        //编辑框关闭
        modalHide() {
            this.showType = false;
        },
        //取消方法
        cancel(modelname) {
            this.$refs[modelname].resetFields();//重置model
            this.showType = false;//关闭modal
            //this.AreaList=[];//清空数据
            this.dataModel.AreaCodeList = [];
            this.dataModel.AreaCodes = "";
        },
        //重置model
        restModel(modelname) {
            this.$refs[modelname].resetFields();//重置model
        },
        //全选方法
        selectAll(selection) {
            this.dataIds = selection;
        },
        //checkbox选中方法
        selectSingel(selection, row) {
            this.dataIds = selection;
        },
        //checkbox取消选中方法
        selecChange(selection) {
            this.dataIds = selection;
        }
    },
    //创建Vue页面方法
    created: function () {
        //创业Vue前调用获取this.datas: {},//table数据对象
        this.getPageData();
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
